import React from 'react';
import classNames from 'classnames';
import styles from './index.less';

export type BadgeSize = 'small' | 'default' | 'large';
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
  text?: string;
  className?: string;
  color?: string;
  style?: React.CSSProperties;
  size?: BadgeSize,
}

class Badge extends React.Component<BadgeProps> {
  render() {
    const { color, className, children, style, text, size, ...restProps } = this.props;
    let sizeCls = 'default';
    switch (size) {
      case 'large':
        sizeCls = 'lg';
        break;
      case 'small':
        sizeCls = 'sm';
      default:
        break;
    }
    const classString = classNames({
      [`badge-${sizeCls}`]: sizeCls,
    }, className);

    const badgeStyle = {
      backgroundColor: color || '#fff',
      ...style,
    };

    return (
      <span
        className={`${styles['self-badge']} ${styles[classString]}`}
        style={badgeStyle}
        {...restProps}
      >
        {children ? children : text}
      </span>
    );
  }
}
export default Badge;
